<template>
    <div>
        <mavon-editor v-model="content" ref=md @imgAdd="$imgAdd" @imgDel="$imgDel" :toolbars="toolbars" :boxShadow="true" :ishljs="true" toolbarsBackground="#fffff3" :subfield="true"
            :editable="true" style="height:60vh">
        </mavon-editor>
    </div>
</template>

<script>
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'

export default {
    name: 'addBlog',
    components: { mavonEditor },
    data() {
        return {
            //博客内容
            content: "我是一只丑小鸭咿呀咿呀哟",
            //工具栏
            toolbars: {
                bold: false, // 粗体
                italic: false, // 斜体
                header: false, // 标题
                underline: false, // 下划线
                strikethrough: false, // 中划线
                mark: false, // 标记
                superscript: false, // 上角标
                subscript: false, // 下角标
                link: true, // 链接
                imagelink: true, // 图片链接
                table: true, // 表格
                fullscreen: true, // 全屏编辑
                readmodel: true, // 沉浸式阅读
                htmlcode: true, // 展示html源码
                help: false, // 帮助
                undo: false, // 上一步
                redo: false, // 下一步
                navigation: false, // 导航目录
                alignleft: true, // 左对齐
                aligncenter: true, // 居中
                alignright: true, // 右对齐
                subfield: true, // 单双栏模式
                preview: true, // 预览
            }
        }
    },
    methods: {
        //图片上传到服务器
        $imgAdd(pos, $file){
           var formdata = new FormData();
           formdata.append('image', $file);
           axios({
               url: 'server url',
               method: 'post',
               data: formdata,
               headers: { 'Content-Type': 'multipart/form-data' },
           }).then((url) => {
               //把返回的路径url替换原本的位置
               this.$refs.md.$img2Url(pos, url);
           })
        },
        $imgDel(pos){
            console.log(pos)
            //删除的请求
        },
    }
}
</script>

<style scoped>

</style>
